<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TLT-文本辅助打标签软件</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
	
    <style>
        html, body{
            margin: 0;
            padding: 0;
        }

		.header{
			display: flex;
			align-items: center;
			border-radius: 4px;
			border: 1px solid #D7DAE2;
			margin: 24px 0;
		}

        header{
            font-size: 24px;
            font-weight: 1000;
			padding: 16px;
			color: #409EFF;
        }
		
		.header-right{
			flex-grow: 1;
			text-align: right;
			font-size: 14px;
			color: #999999;
			padding: 0 16px;
		}

        .content{
            width: 1140px;
            margin: auto;
        }
		
		.text{
			padding: 16px;
			background: #C6E2FF;
			border-radius: 4px;
			font-size: 18px;
			line-height: 1.5;
			color: #606266;
		}
		
		.tasks-task{
			display: flex;
			align-items: center;
			height: 50px;
			padding: 16px;
		}
		
		.tasks-task-title{
			margin-right: 24px;
			font-size: 16px;
			color: #5A5A5A;
		}
		
		.tools{
			padding: 16px;
			text-align: center;
		}
		
		.tip iframe{
			border: none;
			width: 100%;
			min-height: 500px;
			height: auto;
		}
    </style>
</head>
<body>
    <div id="app">
        <div class="content">
			<div class="header">
				<header class="">
					<span class="el-icon-moon-night"></span>
					<span>TLT</span>
				</header>
				<div class="header-right">
					{{id}} 已完成 {{data.finished}} / {{data.total}}
				</div>
			</div>
            <div class="text">{{data.text}}</div>
            <div class="tasks">
                <div class="tasks-task" v-for="column_name, index of data.columns" :key="index">
                    <div class="tasks-task-title">{{column_name}}</div>
                    <div class="tasks-task-button">
						<el-radio v-model="data.labels_ids[index]" :label="idx" v-for="label, idx of data.labels[index]">{{label}}</el-radio>
                    </div>
                </div>
            </div>
            <div class="tools">
				<el-button size="mini" round @click="update_db">下一个</el-button>
            </div>
			<div class="tip">
				<iframe src="tip.html" frameborder="0" scrolling="no"></iframe>
			</div>
        </div>
    </div>
	<!-- 引入组件库 -->
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
	<script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
			data(){
				return {
					radio: 1,
					radio2: 2,
					id: "",
					data: {}
				};
			},
			created(){
                id = (this.getUrlKey("identifier", window.location.href));
                this.id = id;
				if(id === null){
					this.$message({
					  message: '缺少必要的参数',
					  type: 'warning'
					});
				}else{
					axios.get('/task/' + id)
					  .then((response) => {
					  	if(response.data.status){
							this.data = response.data.data;
					  	}else{
					  		this.$message.error(response.data.msg);
					  	}
					  })
					  .catch((error) => {
						console.log(error);
					  });
				}

			},
			methods: {
				getUrlKey(name,url){
				　　return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [, ""])[1].replace(/\+/g, '%20')) || null
				},
				update_db(){
				    //console.log(this.data);
				    let args = {};
				    for(let i = 0; i < this.data.columns.length; i++){
				        if(this.data.labels_ids[i] == null){
				            this.$message.error("你似乎有某项没有选择标签");
				            return;
				        }
				        args[this.data.columns[i]] = this.data.labels_ids[i];
				    }
				    args["token"] = this.data.token;
                    axios.get(`/finish/${this.id}/${this.data.id}`, {params: args})
					  .then((response) => {
					  	if(response.data.status){
					  	    //console.log(response.data);
					  	    location.reload();
					  	}else{
					  		this.$message.error(response.data.msg);
					  	}
					  })
					  .catch((error) => {
						console.log(error);
					  });
				}
			}
        });

        //console.log(app);

    </script>
</body>
</html>